<template>
  <div class="user">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item>
        <el-input
            clearable
            v-model="searchParam.content"
            placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item style="width: 300px">
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.feedbackRecords" border style="width: 100%" v-loading="data.loading"
              element-loading-text="拼命加载中">
      <el-table-column prop="content" label="内容" align="center" width="150px"/>
      <el-table-column prop="feedbackUserName" label="反馈用户名称" align="center" width="150px"/>
      <el-table-column prop="feedbackRecordTypeName" label="反馈记录类型名称" align="center" width="150px"/>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180"
          align="center"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230" align="center">
        <template #default="scope">
          <el-popconfirm
              title="你确定要删除该反馈记录吗？"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="deleteFeedbackRecord(scope.row.uuid)"
          >
            <template #reference>
              <el-button
                  class="button-space"
                  type="danger"
                  size="small"
              >删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="data.total"
        style="text-align: center; margin-top: 10px"
        @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {page, deleted} from "@/api/feedbackRecord/feedbackRecord";
import {ElMessage} from "element-plus";

export default {
  setup() {
    const searchParam = reactive({
      content: '',
      page: 1,
      size: 10
    })
    const data = reactive({
      feedbackRecords: [],
      total: 0,
      loading: false,
    })
    /**
     * 分页查询反馈记录
     * @returns {Promise<void>}
     */
    const pageSearchFeedbackRecord = async () => {
      data.loading = true
      page(searchParam).then(res => {
        data.feedbackRecords = res.data.records
        data.total = res.data.total
      }).finally(() => {
        data.loading = false
      })
    }

    /**
     * 删除反馈记录
     * @param uuid
     * @returns {Promise<void>}
     */
    const deleteFeedbackRecord = async (uuid) => {
      deleted(uuid).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        pageSearchFeedbackRecord()
      })
    }
    /**
     * 搜索查询反馈记录
     * @returns {Promise<void>}
     */
    const search = async () => {
      page(searchParam).then(res => {
        data.feedbackRecords = res.data.records
        data.total = res.data.total
      })
    }
    onMounted(() => {
      pageSearchFeedbackRecord()
    })
    return {
      data,
      searchParam,
      search,
      deleteFeedbackRecord,
    }
  }
}
</script>

<style scoped>

</style>